<template>
  <s-layout title="充值" class="withdraw-wrap" navbar="inner">
    <view class="wallet-num-box ss-flex ss-col-center ss-row-between" :style="[
      {
        marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
        paddingTop: Number(statusBarHeight + 108) + 'rpx',
      },
    ]">
      <view class="">
        <view class="num-title">当前余额（元）</view>
        <view class="wallet-num">{{ userInfo.money }}</view>
      </view>
      <button class="ss-reset-button log-btn" @tap="sheep.$router.go('/pages/pay/recharge-log')">充值记录</button>
    </view>
    <view class="recharge-box">
      <view class="recharge-card-box">
        <view class="input-box ss-flex border-bottom ss-p-b-20" v-if="state.data.custom_status">
          <uni-forms
            ref="form"
            :model="state.model"
            :rules="state.rules"
            class="form-box"
          >
            <my-form-item required name="bank_name" label="开户行">
              <my-input
                placeholder="请输入开户行"
                v-model="state.model.bank_name"></my-input>
            </my-form-item>
            <my-form-item required name="account_name" label="开户名">
              <my-input
                placeholder="请输入开户名"
                v-model="state.model.account_name"></my-input>
            </my-form-item>
            <my-form-item required name="card_no" label="银行账号">
              <my-input
                placeholder="请输入银行账号"
                v-model="state.model.card_no"></my-input>
            </my-form-item>
            <my-form-item required name="recharge_money" label="充值金额">
              <my-input
                placeholder="请输入充值金额"
                v-model="state.model.recharge_money"></my-input>
            </my-form-item>
            <my-form-item required name="flow_img_url" labelPosition="top" label="上传水单">
              <s-uploader
                v-model:url="state.model.flow_img_url"
                fileMediatype="image"
                limit="1"
                mode="grid"
                :imageStyles="{ width: '168rpx', height: '168rpx' }"
              ></s-uploader>
            </my-form-item>
            <my-form-item labelPosition="top" name="remark" label="备注">
              <my-input
                placeholder="选填,请输入备注"
                v-model="state.model.remark" type="textarea"></my-input>
            </my-form-item>
          </uni-forms>
        </view>
        <my-btn block @tap="onConfirm">确认充值</my-btn>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import { computed, reactive, ref, unref } from 'vue';
  import sheep from '@/sheep';
  import { onLoad } from '@dcloudio/uni-app';
  import MyBtn from '@/pages/components/my-btn.vue';
  import SLayout from '@/sheep/components/s-layout/s-layout.vue';
  import UniForms from '@/uni_modules/uni-forms/components/uni-forms/uni-forms.vue';
  import { accountName, bankCode, bankName, rechargeMoney } from '@/sheep/validate/form';
  const form = ref(null);

  const userInfo = computed(() => sheep.$store('user').userInfo);
  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
  const headerBg = sheep.$url.css('/assets/addons/shopro/uniapp/user/withdraw_bg.png');
  const state = reactive({
    model: {
      'bank_name': '',
      'account_name': '',
      'card_no': '',
      'flow_img_url': '',
      'recharge_money': '',
      'remark': '',
    },
    imgs: [],
    rules: {
      'bank_name': bankName,
      'account_name': accountName,
      'card_no': bankCode,
      'flow_img_url': '',
      'recharge_money': rechargeMoney,
      'remark': '',
    },
    recharge_money: '',
    data: {},
    faceValueList: [],
  });

  // 点击卡片

  function onCard(e) {
    state.recharge_money = e;
  }


  async function getRechargeTabs() {
    const res = await sheep.$api.trade.rechargeRules();
    if (res.code === 1) {
      state.data = res.data;
      state.data.status = res.data.status;
      state.faceValueList = res.data.quick_amounts;
    }
  }

  function onChange(e) {
    state.data.gift_type = e.detail.value;
  }

  async function onConfirm() {
    if (!state.model.flow_img_url){
      sheep.$helper.toast('请上传上传水单');
      return;
    }
    const validate = await unref(form)
      .validate()
      .catch((error) => {
        'error: ', error;
      });
    if (!validate) return;
    const { code, data } = await sheep.$api.trade.recharge({...state.model});
    if (code === 1) {
      uni.showModal({
        title: '提示',
        content: '充值提交成功',
        cancelText: '返回首页',
        confirmText: '充值记录',
        success: function(res) {
          if (res.confirm) {
            sheep.$router.go('/pages/pay/recharge-log');
          } else if (res.cancel) {
            sheep.$router.go('/pages/index/index');
          }
        },
      });
    }
  }

  onLoad(() => {
    getRechargeTabs();
  });
</script>

<style lang="scss" scoped>
  :deep() {
    .uni-input-input {
      font-family: OPPOSANS !important;
    }
  }

  .wallet-num-box {
    padding: 0 40rpx 80rpx;
    background: var(--ui-BG-Main) v-bind(headerBg) center/750rpx 100% no-repeat;
    border-radius: 0 0 5% 5%;

    .num-title {
      font-size: 26rpx;
      font-weight: 500;
      color: $white;
      margin-bottom: 20rpx;
    }

    .wallet-num {
      font-size: 60rpx;
      font-weight: 500;
      color: $white;
      font-family: OPPOSANS;
    }

    .log-btn {
      width: 170rpx;
      height: 60rpx;
      line-height: 60rpx;
      border: 1rpx solid $white;
      border-radius: 30rpx;
      padding: 0;
      font-size: 26rpx;
      font-weight: 500;
      color: $white;
    }
  }

  .recharge-box {
    position: relative;
    padding: 0 30rpx;
    padding-bottom: 100rpx;
    margin-top: -60rpx;
  }

  .save-btn {
    width: 620rpx;
    background: linear-gradient(90deg, #45C9F0, #36F6AF);
    height: 86rpx;
    border-radius: 44rpx;
    font-size: 30rpx;
  }

  .recharge-card-box {
    box-sizing: border-box;

    .input-label {
      font-size: 30rpx;
      font-weight: 500;
      color: #333;
    }

    .unit {
      display: flex;
      align-items: center;
      font-size: 48rpx;
      font-weight: 500;
    }

    .uni-easyinput__placeholder-class {
      font-size: 30rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
    }

    :deep(.uni-easyinput__content-input) {
      font-size: 48rpx;
    }

    .face-value-btn {
      width: 200rpx;
      height: 144rpx;
      border: 1px solid var(--ui-BG-Main);
      border-radius: 10rpx;
      position: relative;
      z-index: 1;
      margin-bottom: 15rpx;
      margin-right: 15rpx;

      &:nth-of-type(3n) {
        margin-right: 0;
      }

      .face-value-title {
        font-size: 36rpx;
        font-weight: 500;
        color: var(--ui-BG-Main);
        font-family: OPPOSANS;

        &::after {
          content: '元';
          font-size: 24rpx;
          margin-left: 6rpx;
        }
      }

      .face-value-tag {
        position: absolute;
        z-index: 2;
        height: 40rpx;
        line-height: 40rpx;
        background: var(--ui-BG-Main);
        opacity: 0.8;
        border-radius: 10rpx 0 20rpx 0;
        top: 0;
        left: -2rpx;
        padding: 0 16rpx;
        font-size: 22rpx;
        color: $white;
        font-family: OPPOSANS;
      }

      &::before {
        position: absolute;
        content: ' ';
        width: 100%;
        height: 100%;
        background: var(--ui-BG-Main);
        opacity: 0.1;
        z-index: 0;
        left: 0;
        top: 0;
      }
    }

    .btn-active {
      z-index: 1;

      &::before {
        content: '';
        background: var(--ui-BG-Main);
        opacity: 1;
      }

      .face-value-title {
        color: $white;
        position: relative;
        z-index: 1;
        font-family: OPPOSANS;
      }

      .face-value-tag {
        background: $white;
        color: var(--ui-BG-Main);
        font-family: OPPOSANS;
      }
    }
  }
</style>
